<template>
  <view class="notification-container">
    <!-- 通知列表 -->
    <view class="notification-section">
      <view class="section-header" @click="toggleNotice">
        <view class="header-left">
          <text class="section-title">通知</text>
          <text class="unread-count" v-if="unreadNoticeCount > 0">{{unreadNoticeCount}}</text>
        </view>
        <view class="header-right">
          <view class="mark-read-btn" :class="{'disabled': unreadNoticeCount === 0}" @click.stop="markAllRead('notice')">
            <text class="btn-text">全部已读</text>
          </view>
          <text class="iconfont" :class="showNotice ? 'icon-arrow-up' : 'icon-arrow-down'"></text>
        </view>
      </view>
      <view class="notification-list" v-if="showNotice">
        <view class="notification-item" v-for="(item, index) in noticeList" :key="index" @click="goToDetail(item, 'notice')">
          <view class="item-content">
            <view class="item-title">
              <text>{{item.noticeTitle}}</text>
              <text class="unread-dot" v-if="item.status === '0' && !isRead(item.noticeId)"></text>
            </view>
            <view class="item-time">{{item.createTime}}</view>
          </view>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        <view class="empty-tip" v-if="noticeList.length === 0">暂无通知</view>
      </view>
    </view>

    <!-- 公告列表 -->
    <view class="notification-section">
      <view class="section-header" @click="toggleGonggao">
        <view class="header-left">
          <text class="section-title">公告</text>
          <text class="unread-count" v-if="unreadGonggaoCount > 0">{{unreadGonggaoCount}}</text>
        </view>
        <view class="header-right">
          <view class="mark-read-btn" :class="{'disabled': unreadGonggaoCount === 0}" @click.stop="markAllRead('gonggao')">
            <text class="btn-text">全部已读</text>
          </view>
          <text class="iconfont" :class="showGonggao ? 'icon-arrow-up' : 'icon-arrow-down'"></text>
        </view>
      </view>
      <view class="notification-list" v-if="showGonggao">
        <view class="notification-item" v-for="(item, index) in gonggaoList" :key="index" @click="goToDetail(item, 'gonggao')">
          <view class="item-content">
            <view class="item-title">
              <text>{{item.noticeTitle}}</text>
              <text class="unread-dot" v-if="item.status === '0' && !isRead(item.noticeId)"></text>
            </view>
            <view class="item-time">{{item.createTime}}</view>
          </view>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        <view class="empty-tip" v-if="gonggaoList.length === 0">暂无公告</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getNoticeList, getGongGaoList } from '@/api/notification.js'

export default {
  data() {
    return {
      noticeList: [],
      gonggaoList: [],
      showNotice: true,
      showGonggao: true,
      loading: false,
      readList: [] // 用于存储已读状态
    }
  },
  computed: {
    unreadNoticeCount() {
      return this.noticeList.filter(item => item.status === '0' && !this.isRead(item.noticeId)).length
    },
    unreadGonggaoCount() {
      return this.gonggaoList.filter(item => item.status === '0' && !this.isRead(item.noticeId)).length
    }
  },
  onLoad() {
    this.loadReadStatus()
    this.loadLists()
  },
  onShow() {
    this.loadReadStatus()
    this.loadLists()
  },
  onPullDownRefresh() {
    this.loadReadStatus()
    this.loadLists()
  },
  methods: {
    // 加载已读状态
    loadReadStatus() {
      this.readList = uni.getStorageSync('readNoticeList') || []
    },
    // 检查消息是否已读
    isRead(noticeId) {
      return this.readList.includes(noticeId)
    },
    // 标记消息为已读
    markAsRead(noticeId) {
      if (!this.isRead(noticeId)) {
        this.readList.push(noticeId)
        uni.setStorageSync('readNoticeList', this.readList)
      }
    },
    async loadLists() {
      if (this.loading) return
      this.loading = true
      try {
        const [noticeRes, gonggaoRes] = await Promise.all([
          getNoticeList(),
          getGongGaoList()
        ])
        this.noticeList = noticeRes.data || []
        this.gonggaoList = gonggaoRes.data || []
      } catch (error) {
        console.error('加载列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },
    toggleNotice() {
      this.showNotice = !this.showNotice
    },
    toggleGonggao() {
      this.showGonggao = !this.showGonggao
    },
    goToDetail(item, type) {
      // 标记为已读
      if (item.status === '0') {
        this.markAsRead(item.noticeId)
      }
      uni.navigateTo({
        url: `/pages/notification/detail?id=${item.noticeId}&type=${type}`
      })
    },
    markAllRead(type) {
      const unreadCount = type === 'notice' ? this.unreadNoticeCount : this.unreadGonggaoCount
      if (unreadCount === 0) return

      uni.showModal({
        title: '提示',
        content: `确定将所有${type === 'notice' ? '通知' : '公告'}标记为已读？`,
        success: (res) => {
          if (res.confirm) {
            const list = type === 'notice' ? this.noticeList : this.gonggaoList
            let hasNewRead = false
            
            list.forEach(item => {
              if (item.status === '0' && !this.isRead(item.noticeId)) {
                this.markAsRead(item.noticeId)
                hasNewRead = true
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.notification-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.notification-section {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.unread-count {
  background-color: #ff4d4f;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 12rpx;
}

.notification-list {
  padding: 0 30rpx;
}

.notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
  
  &:last-child {
    border-bottom: none;
  }
}

.item-content {
  flex: 1;
  margin-right: 20rpx;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  display: flex;
  align-items: center;
}

.unread-dot {
  width: 12rpx;
  height: 12rpx;
  background-color: #ff4d4f;
  border-radius: 50%;
  margin-left: 12rpx;
}

.item-time {
  font-size: 24rpx;
  color: #999;
}

.empty-tip {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  padding: 40rpx 0;
}

.icon-arrow-right {
  color: #999;
  font-size: 24rpx;
}

.mark-read-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  transition: all 0.3s;

  &.disabled {
    background-color: #f0f0f0;
    opacity: 0.5;
    pointer-events: none;
  }
}

.btn-text {
  font-size: 24rpx;
  color: #666;
}
</style> 